<template>
  <div>
      <div class="btn_wrap">
        <el-button type="primary" @click="toSen('all')">全部</el-button>
        <el-button type="success"  @click="toSen('done')">已完成</el-button>
        <el-button type="danger"  @click="toSen('no')">未完成</el-button>
        <el-button  @click="toSen('todone')">全部标记已完成</el-button>
        <el-button  @click="toSen('clear')">全部清除</el-button>
        <el-button  @click="toSen('toexcel')">导出excel</el-button>
        <el-button  @click="toBrother">给兄弟组件随机任务</el-button>
        <slot name="footer"></slot>
        <slot name="bottom"></slot>
        <hr>
        <sun-zi></sun-zi>
      </div>
  </div>
</template>
<script setup>
      import sunZi from './sunzi.vue'
      import mitt from '../../utils/mitt'
      import { defineEmits ,useAttrs ,useSlots} from 'vue';
      let emit=defineEmits("sendstatus")
      // 点击不同的按钮 给父组件传送不同的状态
      let toSen=(status)=>{
        emit('sendstatus',status)
      }
      // 使用mitt插件完成兄弟组件传值
      let toBrother=()=>{
        let tolist=["找个男朋友","吃顿火锅","去玉林路","座108路汽车","去厦门鼓浪屿"]
        let index=Math.floor(Math.random()*tolist.length)
        //
        mitt.emit('sendtodo',{id:new Date().getTime(),isCheck:false,text:tolist[index]})

      }
      // attrs获取除props以外的 父传子的数据
      let attrs=useAttrs();
      console.log(attrs,"777777777777777777777")
      // useSlots获取所有插槽的内容  获取内容是虚拟dom
      let slots=useSlots();
      console.log(slots,"插槽的内容")
</script>
<style  scoped>
  .btn_wrap{
    width:400px;
    margin-top: 40px;
    margin-left:40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .el-button{
    width: 300px;
  }
</style>